<template>
  <div class="">
    <plate-card title="水阀">
      <div class="h-[200px] p-2">
        <dv-scroll-board :config="config" style="width: 100%; height: 100%" @click="clickHandler" />
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
  import { reactive, ref } from 'vue'

  const scrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)

  const config = reactive({
    header: ['名称', '地块位置', '当前状态'],
    data: [
      ['1#水阀', '04号地块', '<span style="color:#fb7293;">状态类型一</span>'],
      ['1#水阀', '04号地块', '<span style="color:#32c5e9;">状态类型二</span>'],
      ['1#水阀', '04号地块', '<span style="color:#31c755;">状态类型三</span>'],
      ['1#水阀', '04号地块', '<span style="color:#fb7293;">状态类型一</span>'],
      ['1#水阀', '04号地块', '<span style="color:#32c5e9;">状态类型二</span>'],
      ['1#水阀', '04号地块', '<span style="color:#31c755;">状态类型三</span>']
    ],
    index: false,
    rowNum: 3,
    headerHeight: 28,
    headerBGC: 'rgba(0, 59, 81, 0.8)',
    oddRowBGC: 'transparent',
    evenRowBGC: 'transparent',
    // columnWidth: [50],
    align: ['center']
  })

  const mouseoverHandler = (e: any) => {
    console.log(e)
  }

  const clickHandler = (e: any) => {
    console.log(e)
  }
</script>

<style scoped></style>
